<!doctype html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>羽毛球比赛积分系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/css/tabler.min.css">
</head>

<body class="layout-fluid">
  <div class="page">
    <div class="page-wrapper">
      <div class="page-header d-print-none">
        <div class="container-xl">
          <div class="row g-2 align-items-center">
            <div class="col">
              <div class="page-pretitle">记录比分·管理选手 ver0.2</div>
              <h2 class="page-title">羽毛球比赛积分系统</h2>
            </div>
            <div class="col-auto ms-auto d-print-none">
              <div class="btn-list">
      
                  <a href="#" class="btn btn-1 btn-primary" data-bs-toggle="modal" data-bs-target="#modal-pepol">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="icon icon-2">
                      <path d="M12 5l0 14"></path>
                      <path d="M5 12l14 0"></path>
                    </svg>
                    新建选手</a>

                <a href="#" class="btn btn-primary btn-5 d-none d-sm-inline-block" data-bs-toggle="modal"
                  data-bs-target="#modal-report">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-2">
                    <path d="M12 5l0 14"></path>
                    <path d="M5 12l14 0"></path>
                  </svg>
                  新建赛程
                </a>
                <a href="#" class="btn btn-success btn-6 d-sm-none btn-icon" data-bs-toggle="modal"
                  data-bs-target="#modal-report" aria-label="新建赛程">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-2">
                    <path d="M12 5l0 14"></path>
                    <path d="M5 12l14 0"></path>
                  </svg>
                </a>
              </div>

              <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">新的赛程</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                        <div class="col-lg-6">
                          <div class="mb-3">
                            <label class="form-label">比赛日期</label>
                            <input type="date" class="form-control">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-body">
                      <label class="form-label">比赛选手</label>
                      <div class="form-selectgroup-boxes row mb-3">
                        <div class="col-lg-6">
                          <div class="input-group">
                            <input type="text" class="form-control" autocomplete="off" />
                            <span class="input-group-text">
                              <input class="form-check-input m-0" type="radio" name="radios-inline" />
                            </span>
                          </div>
                        </div>
                        <div class="col-lg-6">
                          <div class="input-group">
                            <input type="text" class="form-control" autocomplete="off" />
                            <span class="input-group-text">
                              <input class="form-check-input m-0" type="radio" name="radios-inline" />
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal">取消</a>
                      <a href="#" class="btn btn-primary btn-5 ms-auto">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="icon icon-2">
                          <path d="M12 5l0 14"></path>
                          <path d="M5 12l14 0"></path>
                        </svg>
                        保存比赛
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="modal modal-blur fade" id="modal-pepol" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">新的选手</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                      <div class="row">
                        <div class="col-lg-6">
                          <div class="mb-3">
                            <label class="form-label">姓名</label>
                            <input type="text" class="form-control" name="name">
                          </div>
                        </div>
                        <div class="col-lg-6">
                          <div class="mb-3">
                            <label class="form-label">初始分数</label>
                            <input type="number" class="form-control" name="score" value="0" min="0" step="0.1">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <a href="#" class="btn btn-link link-secondary btn-3" data-bs-dismiss="modal">取消</a>
                      <a href="#" class="btn btn-primary btn-5 ms-auto">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                          class="icon icon-2">
                          <path d="M12 5l0 14"></path>
                          <path d="M5 12l14 0"></path>
                        </svg>
                        选手入赛
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="page-body">
        <div class="container-xl">
          <div class="row row-deck row-cards">
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">选手信息</h3>
                </div>
                <div class="card-table table-responsive">
                  <table class="table table-vcenter" id="player-list-table">
                    <thead>
                      <tr>
                        <th>选手姓名</th>
                        <th>当前积分</th>
                        <th>比赛次数</th>
                        <th></th><th></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td colspan="2" class="text-muted">暂无选手信息</td>
                        <td class="w-50">
                          <div class="progress progress-xs">
                            <div class="progress-bar bg-primary" style="width: 71%"></div>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                  <h3 class="card-title">比赛信息</h3>
                  <button class="btn btn-danger" id="clear-games-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24"
                      height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                      stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M4 7l16 0"></path>
                      <path d="M10 11l0 6"></path>
                      <path d="M14 11l0 6"></path>
                      <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
                      <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
                    </svg>
                    清空比赛
                  </button>
                </div>
                <div class="card-table table-responsive">
                  <table class="table table-vcenter" id="match-list-table">
                    <thead>
                      <tr>
                        <th>时间</th>
                        <th>选手A</th>
                        <th>胜负</th>
                        <th>选手B</th>
                        <th>获胜者</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td colspan="3" class="text-muted">暂无比赛信息</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0/dist/js/tabler.min.js"></script>
  <script src="js/game.js"></script>
  <script src="js/players.js"></script>
</body>

</html>